<template>
	<view>		
		<view class="index-search">
			<view class="search-text">{{city}}</view>
			<view class="search-input" @click="turnPage('search/index')">
				<image src="../../static/icon_search.png" mode="aspectFit"></image>
				<input type="text" value="输入地区、小区或地址" disabled />
			</view>
		</view>
		<swiper class="swiper" :autoplay="true">
			<swiper-item>
				<image src="../../static/demo.jpg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/demo.jpg" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="index-grid">
			<image @click="turnPage('newHouse/index')" src="../../static/index_3.png" mode="widthFix"></image>
			<image @click="turnPage('secondHouse/index')" src="../../static/index_1.png" mode="widthFix"></image>
			<image @click="turnPage('rentHouse/index')" src="../../static/index_2.png" mode="widthFix"></image>			
		</view>
		<view class="house-list">
			<view class="house-title">
				<view>为您推荐</view>
				<view class="tab-box">
					<text v-for="(item,index) in listArray" :key="index" :class="item.type == listType ? 'active' : ''" @click="fnType(item.type)">{{item.title}}</text>
				</view>
			</view>
			<view class="house-box" v-for="item in swipeList" :key="item" @click="fnTurnDetail(item)">
				<image :src="item.img_url[0]" mode="aspectFill"></image>
				<view>
					<view>{{item.title}}·{{item.house_layout}}</view>
					<view>
						<text>{{item.address}}</text>
						<text>买<text>{{item.saler_ratio}}</text>卖<text>{{item.seller_ratio}}</text></text>
						<text class="c-main">{{item.house_price}}万</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import amap from '@/common/amap-wx.130.js'
import store from '@/store/store.vue'
export default {	
	onLoad(){			
			
	},
	onShow(){
		let myAmapFun = new amap.AMapWX({ key: '10bc83ee15242ecf941181d8b1344a83' });
		 myAmapFun.getRegeo({
			success: (res) => {		
			    this.city = res[0].regeocodeData.addressComponent.city
			},
			fail:(res)=>{
				uni.showModal({
				    title: '提示',
				    content: '获取位置错误'
				});	
			}
		})
		this.getHouseListByUser()
	},
	components: {},
	data() {
		return {
			city: '',
			afterAuth: false,
			listType: 1, // 1新房 2二手房 3租房 
			listArray: [{
				title: '新房',
				type: 1
			},{
				title: '二手房',
				type: 2
			}, {
				title: '租房',
				type: 3
			}],
			swipeList:[]
		}
	},
	methods: {
		getHouseListByUser(){
			let _this = this				
			uni.request({
			    url: store.url + '/house/list?&house_source_type=' + _this.listType,
				method: 'GET',			    
			    header: {
					"content-type": "application/json;charset=utf-8"						
			    },
			    success: (res) => {		
					let _this = this
					console.log(res)
					if(res.data.status == 'success'){
						_this.swipeList = []
						let array = res.data.message
						let swipeList = []
						for(let i = 0; i < array.length; i++){		
							let arr = array[i].house_layout.split(';')
						    array[i].house_layout = arr[0] + '室' + arr[1] + '厅' + arr[2] + '卫'
							arr = array[i].commission_share_ratio.split(';')
							array[i].saler_ratio = arr[0]
							array[i].seller_ratio = arr[1]
							if(_this.listType == 1){
								arr = array[i].new_house_img_url.split(';')
							}else if(_this.listType == 2){
								arr = array[i].second_house_img_url.split(';')
							}else{
								arr = array[i].rent_house_img_url.split(';')
							}						
							arr.pop()
							for(let j = 0; j < arr.length; j++){
								arr[j] = store.url + '/uploads/' + arr[j]
							}			
							array[i].img_url = arr
							let newObj = { 
								title: array[i].building_name == undefined? array[i].community_name : array[i].building_name,
								house_layout: array[i].house_layout,
								address: array[i].address,
								commission_share_ratio: array[i].commission_share_ratio,								
								saler_ratio: array[i].saler_ratio,
								seller_ratio: array[i].seller_ratio,
								house_price: ('house_price' in array[i]) ? array[i].house_price : '',
								id: array[i].id,
								user_id: array[i].user_id,
								house_source_id: array[i].house_source_id,
								img_url: array[i].img_url,
								house_id: array[i].house_id,																
								inviter_id: array[i].inviter_id,
								publisher_id: array[i].user_id,
							}								
							swipeList.push(newObj)
						}
						_this.swipeList = swipeList
					}										        
			    },
				fail: (res)=>{
					uni.showModal({
					    title: '提示',
					    content: '访问服务器失败: ' + res.data.message
					});						
				}
			});	
		},
		getPhone(e){
			console.log(e)
		},		
		fnType(type) {
			this.listType = type
			this.getHouseListByUser()
		},
		fnTurnDetail(item) {		
			let type = this.listType
			let _url = type == 1 ? 'new' : (type == 2 ? 'second' : 'rent')
			uni.navigateTo({
				url: '/pages/' + _url + 'House/detail?id=' + item.house_id + '&user_id=' + item.user_id + '&house_source_id=' + item.house_source_id + '&publisher_id=' + item.publisher_id + '&inviter_id=' + item.inviter_id + '&title=' + item.title + '&address=' + item.address + '&house_layout=' + item.house_layout, 					
			})
		}
	}		
}
</script>

<style lang="scss" scoped>
	.visible{
		display: none;
	}
	.index-search {
		display: flex;
		padding: 24rpx 40rpx;
		box-sizing: border-box;
		height: 176rpx;
		color: #FFF;
		font-size: 24rpx;
		background-image: linear-gradient(180deg, #f6613e, #f13b32);

		.search-text {
			height: 52rpx;
			// &::after {
			// 	position: absolute;
			// 	margin-top: -4rpx;
			// 	top: 50%;
			// 	right: 0;
			// 	content: '';
			// 	height:0;
			// 	width:0;
			// 	border-right: 8rpx solid transparent;
			// 	border-left: 8rpx solid transparent;
			// 	border-top: 8rpx solid #FFF;
			// }
		}

		.search-input {
			display: flex;
			margin: 0 24rpx;
			padding: 0 34rpx;
			box-sizing: border-box;
			border-radius: 40rpx;
			align-items: center;
			flex: 1;
			height: 52rpx;
			background: #FFF;

			image {
				width: 24rpx;
				height: 100%;
			}

			input {
				padding: 0 16rpx;
				font-size: 24rpx;
				color: #c3bfc5;
			}
		}
	}

	.swiper {
		margin: -76rpx auto 0;
		border-radius: 20rpx;
		overflow: hidden;
		width: 90vw;
		height: 46vw;

		image {
			display: block;
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
		}
	}

	.index-grid {
		display: flex;
		padding: 4vw 2vw;

		image {
			margin: 0 3vw;
			flex: 1;
		}
	}

	.house-list {
		padding: 0 5vw 5vw;
		box-sizing: border-box;
	}

	.house-title {
		display: flex;
		justify-content: space-between;
		font-size: 20rpx;
		color: #676565;

		.tab-box {
			// font-size: 20rpx;
			color: #bdbdbd;

			text {
				padding-left: 40rpx;
				box-sizing: border-box;
			}

			.active {
				color: #f13b32;
			}
		}
	}

	.house-box {
		display: flex;
		margin-top: 5vw;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background: #FFF;

		image {
			margin-right: 5vw;
			width: 230rpx;
			height: 170rpx;
		}

		>view {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			overflow: hidden;

			view {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				line-height: 1.6;
				font-size: 28rpx;

				>text {
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 22rpx;

					text {
						margin: 0 4rpx;
						color: #f13b32;
					}

					&.c-main {
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
